import * as React from 'react';
import { connect } from 'react-redux';
import { Tabs, Icon } from 'antd';
import './Index.scss';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadableGuideEdit = LoadableComponent(() => import('./GuideEdit'));
const LoadableBookIndex = LoadableComponent(() => import('./BookIndex'));

interface IndexProps {
  dispatch: (action: any) => any;
  lessonId: number;
  courseId: number;
}

interface IndexState {
  activeKey: string;
}

class Index extends React.Component<IndexProps, IndexState> {
  static defaultProps: IndexProps = {
    dispatch: () => {},
    lessonId: 0,
    courseId: 0,
  };
  constructor(props: IndexProps) {
    super(props);
    this.state = {
      activeKey: 'guide',
    };
  }

  componentWillReceiveProps(nextProps: any) {
    const { lessonId } = nextProps;
    const { lessonId: oldLessonId } = this.props;

    if (lessonId !== oldLessonId) {
      this.handleChangeTab('guide');
    }
  }

  handleChangeTab = (activeKey: string) => {
    this.setState({
      activeKey,
    });
  };

  render() {
    const { lessonId, courseId } = this.props;
    const { activeKey } = this.state;

    return (
      <div id="content_book" className="activity-edit-wrap">
        <Tabs size="small" animated={false} onChange={this.handleChangeTab} activeKey={activeKey}>
          <Tabs.TabPane
            tab={
              <p>
                <Icon type="code-o" />绘本导读
              </p>
            }
            key="guide">
            <LoadableGuideEdit courseId={courseId} lessonId={lessonId} />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <p>
                <Icon type="code-o" />绘本内容
              </p>
            }
            key="content">
            <LoadableBookIndex lessonId={lessonId} />
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}

interface OwnProps {
  lessonId: number;
  courseId: number;
}
function mapStateToProps(state: any, ownProps: OwnProps) {
  const { lessonId, courseId } = ownProps;

  return {
    lessonId,
    courseId,
  };
}

export default connect(mapStateToProps)(Index);
